<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .banner {
        position: relative;
        width: 100%;
        aspect-ratio: 1920 / 700;
        /* 宽 : 高 = 2:1 */
        overflow: hidden;
    }

    .banner .bd {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
        position: relative;
    }

    /* 图片层 */
    .banner .bd li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        /* 不重复 */
        opacity: 0;
        transition: opacity 1s;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 0;

    }

    .banner .bd li.active {
        opacity: 1;
        z-index: 1;
    }

    .banner .prev,
    .banner .next {
        font-size: 40px;
        color: white;
        position: absolute;
        top: 50%;
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.4);
        cursor: pointer;
        transform: translateY(-50%);
        z-index: 10;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 按钮层，确保高于图片 */
        /* background-repeat: no-repeat;
        background-position: center;
        background-size: 20px 20px; */
    }

    /* 左箭头 */
    .banner .prev {
        left: 10px;
        /* background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>'); */
    }

    /* 右箭头 */
    .banner .next {
        right: 10px;
        /* background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>'); */
    }

    /* 悬停高亮 */
    .banner .prev:hover,
    .banner .next:hover {
        background-color: rgba(255, 255, 255, 0.7);
        /* 变亮背景 */
        color: black;
        /* 文字变黑以对比 */
    }

    /* 点击状态（可选） */
    .banner .prev:active,
    .banner .next:active {
        background-color: rgba(255, 255, 255, 1);
        color: red;
    }
</style>

<body>
    <!-- 模块模板，可被克隆使用 -->
    <template id="banner-template">
        <div class="banner">
            <ul class="bd"></ul>
            <a href="javascript:void(0)" class="prev">&lt;</a>
            <a href="javascript:void(0)" class="next">&gt;</a>
        </div>
    </template>
</body>

</html>